<!--
 * @Author: your name
 * @Date: 2021-12-13 13:42:12
 * @LastEditTime: 2021-12-13 13:44:53
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEue
 * @FilePath: \12.13work\project\jurjin\src\App.vue
-->
<template>
  <div class="box">
        <div class="head">
          <h1>掘金</h1>
          <el-menu  class="el-menu-demo" mode="horizontal" router active-text-color='#1e90ff'  default-active='/'>
            <el-menu-item v-for="(v,i) in routes" :key='i' :index="v.path">{{v.name}}</el-menu-item>
          </el-menu>
        </div>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import {routes} from "./router/index"
export default {
  data(){
    return{
      routes:routes
    }
  },
}
</script>

<style>
  *{
    margin: 0;
    padding: 0 ;
    box-sizing: border-box;
    text-decoration: none;
  }
  html,body,.box{
    width: 100%;
    background: #f3f3f3;
    height: 100%;
  }
  .head{
    height: 68px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 100px;
    background: #FFF;
  }
  .head h1{
    margin: 0 20px;
    color: dodgerblue;
  }
  .el-menu-demo{
    flex: 1;
  }
  main{
    background: #FFF;
    width: 60%;
    height: 100%;
    margin: 0 auto;
  }
</style>